<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-08-21 15:18:07
 * @Description: 巡视移动作业主页
-->
<template>
	<article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
			<Theader :title="title" :headerStyle="{color:'#fff'}" :textStyle="{color:'#fff'}" :titleStyle="{color:'#fff'}">
				<template slot="header_arrow">
					<van-icon size="25" name="arrow-left" />
				</template>
				<template slot="header_icon">
					<van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
                    <van-image class="imgSize" width="20" height="20" @click="scanBtn" :src="icon.scan" />
				</template>
			</Theader>
        </div>
        <!-- 菜单-->
        <div class="menus">
            <van-grid :column-num="4" :border="false">
				<van-grid-item v-for="(tab, index) in tabbar" :key="index" @click="goToPage(tab)">
				   <van-image style="margin-bottom: 15px;" :src="tab.active" width="40" height="40"/>
				   <span v-text="tab.name" style="font-size: 12px;"></span>
				</van-grid-item>
			</van-grid>
        </div>
        <!--内容-->
        <div class="content">
            <van-cell @click="showScreenPage" is-link>
				<template slot="title">
                    <span class="line_green"></span>
                    <label class="title-label">我的工作</label>
                </template>
                <template slot="default">
					<van-search style="height: 1.5rem;padding: 2px;" v-model="workName"
                    clearable shape="round" background="#F5F6FA" placeholder="请搜索">
                    </van-search>
				</template>
            </van-cell>
            
            <div class="tabs">
				<van-tabs v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
					<van-tab class="tab-con" title="待处理(6)">
						<div class="tab-item">
							<div class="tab-title">
								<span>待安排</span>
								东善桥变全面巡视
							</div>
							<van-row class="tab-content">
								<van-col span="8">
									<span>类型：</span>
									<label>巡视</label>
								</van-col>
								<van-col span="8">
									<span>发送人：</span>
									<label>王染</label>
								</van-col>
								<van-col span="8">
									<span>2021/07/21 10:30</span>
								</van-col>
							</van-row>
							<div style="text-align: center;">
								<van-button style="width: 12rem;padding: 5px 0px;" type="primary" size="mini">接单</van-button>
							</div>
						</div>
						<div class="tab-item">
							<div class="tab-title">
								<span>待安排</span>
								东善桥变全面巡视
							</div>
							<van-row class="tab-content">
								<van-col span="8">
									<span>类型：</span>
									<label>巡视</label>
								</van-col>
								<van-col span="8">
									<span>发送人：</span>
									<label>王染</label>
								</van-col>
								<van-col span="8">
									<span>2021/07/21 10:30</span>
								</van-col>
							</van-row>
						</div>
					</van-tab>
					<van-tab class="tab-con" title="已处理(15)">
						<div class="tab-item">
							<div class="tab-title">
								<span>待安排</span>
								东善桥变全面巡视
							</div>
							<van-row class="tab-content">
								<van-col span="8">
									<span>类型：</span>
									<label>巡视</label>
								</van-col>
								<van-col span="8">
									<span>发送人：</span>
									<label>王染</label>
								</van-col>
								<van-col span="8">
									<span>2021/07/21 10:30</span>
								</van-col>
							</van-row>
							<div style="text-align: center;">
								<van-button style="width: 12rem;padding: 5px 0px;" type="primary" size="mini">接单</van-button>
							</div>
						</div>
						<div class="tab-item">
							<div class="tab-title">
								<span>待安排</span>
								东善桥变全面巡视
							</div>
							<van-row class="tab-content">
								<van-col span="8">
									<span>类型：</span>
									<label>巡视</label>
								</van-col>
								<van-col span="8">
									<span>发送人：</span>
									<label>王染</label>
								</van-col>
								<van-col span="8">
									<span>2021/07/21 10:30</span>
								</van-col>
							</van-row>
						</div>
					</van-tab>
				  </van-tabs>
            </div>
		</div>
		<Tabbar></Tabbar>
	</article>
</template>

<script type="text/javascript">
	import Theader from "./component/header"
	import Tabbar from '@/components/tabbar'
	export default {
		name: 'tourIndex',
		components: {
			Theader,
			Tabbar
		},
		data() {
			return {
				active: 0,
				title: "变电运维应用",
				icon: {
					rfid:require('../../../assets/tour/rifid.png'),
					scan:require('../../../assets/tour/scan.png'),
					scan:require('../../../assets/tour/scan.png'),
                },
                tabbar: [
                    {
						name: '运维计划',
						path: 'tourTaskIndex',
						pathName: 'home',
						icon: 'compass-full',
						active: require('../../../assets/tour/icon-mt-plan.png'),
					},
					{
						name: '运行值班',
						path: 'addProtect',
						pathName: 'pictureFileResource',
						active: require('../../../assets/tour/icon-mt-duty.png'),
					},
					{
						name: '周期巡视',
						path: '/tourList',
						pathName: 'tourList',
						active: require('../../../assets/tour/icon-mt-cycle.png'),
					},
					{
						name: '特殊巡视',
						path: '/tourList',
						pathName: '/tourList',
						active: require('../../../assets/tour/icon-mt-special-tour.png'),
					},
					{
						name: '操作票',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-operation.png'),
                    },
                    {
						name: '设备跳闸',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-trip.png'),
                    },
                    {
						name: '设备维护',
						path: '/devMaList',
						pathName: 'devMaList',
						active: require('../../../assets/tour/icon-mt-device.png'),
                    },
                    {
						name: '缺陷管理',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-defect.png'),
                    },
                    {
						name: '数据抄录',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-copydata.png'),
					}
				],
				workName: "",
				
			}
		},
		
		computed: {
			
		},
		
		methods: {
            /**
            * @description: rifid
            * @param {*}
            * @return {*}
            */         
			rfidBtn() {

            },
            /**
             * @description: 扫一扫
             * @param {*}
             * @return {*}
             */
            scanBtn() {

			},
			showScreenPage() {

			},
			/**
			* @description: 菜单跳转
			* @param {*}
			* @return {*}
			*/
			goToPage(tab) {
				this.$router.push({
					name: tab.pathName
				})
			}
		},
		
		watch: {
			
		},
		mounted() {
			
		},
		created() {

		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #fff !important;
	}
	.title-bg{
		height: 130px;
		width: 100%;
		background-image: url("../../../assets/tour/bg-shadow.png");
		background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 100% 100%;
	}
	.menus{
		position: relative;
		top:-3.5rem;
		margin-left: 15px;
		margin-right: 15px;
		background: #fff;
		box-shadow: 0px 0px 4px 2px #e0e0e0;
    	border-radius: 5px;
	}
	.content{
		margin-top: -15%;
		height: calc(100% - 20rem);
	}
	.content .title-label{
		font-size: 17px;
		color: #333333;
		font-weight: medium;
	}
	.tabs{
		height: 100%;
		margin-left: 15px;
    	margin-right: 15px;
	}
	.tab-title{
		font-size: 15px;
		font-weight: medium;
		color:#333;
		padding: 5px 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-con{
		overflow: auto;
    	height: calc(100% - 25.2rem);
	}
	.tab-con .tab-item{
		padding: 10px;
		background: #F9FCFC;
		margin-bottom: 10px;
	}
	.tab-con .tab-item .tab-content{
		font-size: 13px;
		color: #999;
		padding: 5px 0px;
	}
	/deep/ .van-grid-item__content{
		padding: 8px;
	}
	/deep/ .van-tabs{
		height: 100%;
	}
	/deep/ .van-tabs__content{
		overflow: auto;
		margin-top: 10px;
    	height: calc(100% - -16rem);
	}
</style>
